<template>
  <div>
    <!-- 顶部 -->
    <ShouHua />
    <!-- <span @click="fun()">></span> -->
    <!-- 中间 -->
    <div class="main">
      <div class="main-content content">
        <!-- 滑动轮播 -->
        <van-swipe @change="onChange">
          <van-swipe-item v-for="(v,i) in arr" :key="i">
            <img :src="v.img" alt class="main-baneer-img" />
            <div class="main-baneer-photo">
              <span>相册</span>
            </div>
          </van-swipe-item>
        </van-swipe>
        <!-- 猫咖文字 -->
        <div class="main-title">
          <p>领航花艺(新西蓝总店)</p>
        </div>
        <!-- 星星 -->
        <div class="main-star">
          <div class="main-light">
            <img src="yangchao/imgs/xingxin.png" alt />
          </div>
          <div class="main-light">
            <img src="yangchao/imgs/xingxin.png" alt />
          </div>
          <div class="main-light">
            <img src="yangchao/imgs/xingxin.png" alt />
          </div>
          <div class="main-light">
            <img src="yangchao/imgs/xingxin.png" alt />
          </div>
          <div class="main-light">
            <img src="yangchao/imgs/xingxin.png" alt />
          </div>
          <div class="main-score">4.9</div>
          <!-- <div class="main-details">详情<img src="yangchaung/Detimg/yjt.png" alt=""></div> -->
          <div class="main-num">589条</div>
          <div>￥225/人</div>
          <div>
            <span class="xiaozhai">小寨</span>
          </div>
        </div>
        <!-- 服务分 -->
        <div class="main-serve">
          <div class="main-serve-left">
            <div>服务:4.9</div>
            <div>环境:4.9</div>
            <div>划算:4.9</div>
          </div>
          <div class="main-serve-right">
            <div class="pet">
              <img src="../../../public/yangchao/imgs/huadian.jpg" alt />
            </div>
            <div class="small">
              <span>花店</span>
              <img src="yangchaung/Detimg/yjt.png" alt />
            </div>
          </div>
        </div>
        <!-- 榜单 -->
        <div class="main-list">
          <img src="yangchaung/Detimg/dianping.png" alt class="img" />
          <div class="main-name">小寨宠物店好评榜第2名</div>
        </div>
        <!-- 营业时间 -->
        <div @click="xiangqing()" class="business-hours">
          <p class="rest">营业中</p>
          <p class="time">周一至周日</p>
          <p>14:00-21:00</p>
        </div>
        <!-- 收录 -->
        <div class="include">
          <div class="left">
            <div class="include-three">
              <p class="three">7</p>
              <p class="threes">收录7年</p>
            </div>
            <p class="food">礼品鲜花</p>
            <p class="thing">开业花篮</p>
            <p class="pet-shop">韩系花艺</p>
          </div>
        </div>
        <!-- 地址 -->
        <div class="location">
          <div class="left">
            <p class="one">长安中路华旗国际A座17楼</p>
            <p class="two">距地铁2/3号线小寨村c东南口步行90米</p>
          </div>
          <div class="right">
            <img src="yangchaung/Detimg/dh.png" alt />
            <p class="phone">电话</p>
          </div>
        </div>
        <div class="juan">
          <div>
            <span class="juanzi">卷</span>
            <span>满150减15、满150减10</span>
          </div>
          <p>去领取</p>
        </div>
        <div class="main1">
          <div class="mainbx">
            <span class="gou">购</span>
            <span class="xianhua">在售鲜花</span>
          </div>
          <div>
            <p @click="shou()">
              全部168个
              <van-icon name="arrow" />
            </p>
          </div>
        </div>
        <div class="luyou">
          <router-link to="/yccera">
            <p class="border">全部</p>
          </router-link>
          <router-link to="/yccerb">
            <p class="border">表达爱意</p>
          </router-link>
          <router-link to="/yccerb">
            <p class="border">致意长辈</p>
          </router-link>
          <!-- <router-link to="/yccerb"><p class="border">求婚示爱</p></router-link> -->
        </div>
      </div>
    </div>
    <!-- 分隔框 -->
    <div class="divide"></div>
    <!-- 优惠评价 -->
    <!-- <ScorllBar/> -->
    <!-- 底部固定栏 -->
    <Bottom-bar />
    <router-view></router-view>
    <div class="fengge"></div>
    <div class="tuangou" @click="jump()">
      <div class="tuangoubx">
        <div>
          <span class="biaoqian">团</span>
          <span>团购(3)</span>
        </div>
        <div class="qingrenjie">
          <div>
            <img src="yangchao/imgs/1.1.jpg" alt />
          </div>
          <div class="left">
            <span>爆款【轻奢款】向阳而生||向日葵...</span>
            <p>￥188</p>
          </div>
        </div>
      </div>
      <div class="tuangoubx">
        <div>
          <span class="biaoqian"></span>
          <span>
            <br />
          </span>
        </div>
        <div class="qingrenjie">
          <div>
            <img src="yangchao/imgs/1.2.jpg" alt />
          </div>
          <div class="left">
            <span>情人节 七夕 520 送女友 老婆 闺蜜M</span>
            <p>￥198</p>
          </div>
        </div>
        <div class="chakan">
          <p>
            查看全部4个团购
            <van-icon name="arrow-down" />
          </p>
        </div>
        <div class="fengge"></div>
        <div>
          <p @click="comment()">评价(38)</p>
        </div>
      </div>
    </div>

    <div class="zujian">
      <YccPin />
    </div>
    <div class="divide"></div>
  </div>
</template>

<script>
import ShouHua from "../../components/yangchao/ShouHua.vue";
import YccPin from "../../components/yangchao/YccPin.vue";
// import {Detimg} from "@/api/yangchuang.js"
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      current: 0,
      active: 0
    };
  },
  mounted() {
    axios.request("http://localhost:8889/Detimg").then(ok => {
      console.log(ok);
      this.arr = ok.data;
      console.log(this);
    });
    // Yccfour().then((ok)=>{
    //     console.log(ok)
    //     this.obj=ok.data
    // })
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    fun() {
      this.$router.go(-1);
    },
    jump() {
      this.$router.push("/YccFive");
    },
    shou() {
      this.$router.push("/");
    },
    comment() {
      this.$router.push("/yccsix");
    },
    xiangqing() {
      this.$router.push("/yccseven");
    }
  },
  components: {
    ShouHua,
    YccPin
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.zujian {
  margin-top: 10.667vw;
}
.fengge {
  // width: 100vw;
  height: 3.2vw;
  background-color: #eee;
}
.tuangou {
  width: 100vw;
  .chakan {
    width: 94.667vw;
    height: 10.667vw;
    text-align: center;
    border-top: 0.267vw solid #999;
    font-size: 3.733vw;
    color: #999;
  }
  .qingrenjie {
    width: 94.667vw;
    height: 25.333vw;
    display: flex;
    .left {
      margin-left: 2.667vw;
      // height: 26.667vw;
    }
    p {
      color: #f63;
      font-size: 6.133vw;
    }
    // justify-content: space-between;
    img {
      width: 23vw;
    }
  }
  .tuangoubx {
    width: 94.667vw;
    height: 26.333vw;
    line-height: 13.333vw;
    // background-color: red;
    margin: auto;
    .biaoqian {
      background-color: #f63;
      color: white;
    }
  }
}

.juan {
  padding-top: 2.667vw;
  display: flex;
  justify-content: space-between;
  .juanzi {
    background-color: #f5a041;
    color: white;
  }
}
.content {
  width: 93.067vw;
  margin: auto;
}
.xiaozhai {
  margin-left: 30.5vw;
  font-size: 3.2vw;
}
.main {
  width: 100vw;
  height: 117.733vw;
  .main-content {
    height: 117.733vw;
    position: relative;
    .main-baneer-img {
      width: 93.067vw;
      height: 50.133vw;
      border-radius: 1.6vw;
    }
    .main-baneer-photo {
      width: 11.2vw;
      height: 4.267vw;
      background: #251d12;
      color: #fff;
      font-size: 2.667vw;
      border-radius: 10.667vw;
      text-align: center;
      position: absolute;
      right: 3vw;
      bottom: 3vw;
      z-index: 999;
    }
    .main-title {
      margin: 2vw 0 1.75vw 0;
      h1 {
        font-size: 5.067vw;
      }
    }
    .main-star {
      display: flex;
      height: 4.267vw;
      font-size: 3.2vw;
      line-height: 4.267vw;
      .main-light {
        width: 4.267vw;
        height: 4.267vw;
        color: #f63;

        img {
          width: 3.733vw;
          height: 4.267vw;
        }
      }
      .main-score {
        color: #ff6633;
        font-weight: bolder;
      }
      .main-details,
      .main-num {
        margin-right: 3.2vw;
        margin-left: 3.2vw;
        position: relative;
        img {
          width: 1.6vw;
          height: 3vw;
          position: absolute;
          right: -3vw;
          bottom: 0.55vw;
        }
      }
    }

    .main-serve {
      display: flex;
      justify-content: space-between;
      margin: 1.6vw 0 1.367vw 0;
      .main-serve-left {
        font-size: 3.467vw;
        display: flex;
      }
      .main-serve-right {
        font-size: 4vw;
        display: flex;
        .pet {
          margin-right: 2.133vw;
          img {
            width: 7.2vw;
            height: 7.2vw;
          }
        }
        img {
          width: 1.6vw;
          height: 3vw;
        }
        .small span {
          margin-right: 2.133vw;
        }
      }
    }

    .main-list {
      display: flex;
      height: 8.333vw;
      border-bottom: 0.267vw solid #f4f4f4;
      .img {
        width: 16.8vw;
        height: 5.333vw;
      }
      .main-name {
        background: linear-gradient(-248deg, #ffebcf 2%, #ffecdd 61%);
        color: #b15e2c;
        width: 35.733vw;
        height: 5.333vw;
        font-size: 3.2vw;
        padding: 0 1.6vw;
        line-height: 5.333vw;
      }
    }

    .business-hours {
      display: flex;
      height: 4vw;
      font-size: 3.467vw;
      line-height: 4vw;
      margin: 1.733vw 0 1.667vw 0;
      .rest {
        margin-right: 3.467vw;
      }
      .time {
        margin-right: 2.4vw;
      }
    }

    .include {
      display: flex;
      height: 5.067vw;
      font-size: 3.2vw;
      line-height: 5.067vw;
      text-align: center;
      margin-bottom: 2.4vw;
      .left {
        display: flex;
        justify-content: space-between;
        width: 59.733vw;
      }
      .include-three {
        display: flex;
      }
      .three {
        width: 5.067vw;
        background: #fca94f;
        color: #ffffff;
      }
      .threes {
        background: #fdf1ea;
        color: #f5a041;
        font-size: 3.2vw;
        width: 14.667vw;
      }
      .food {
        width: 16vw;
        background: #f6f5f6;
      }
      .thing {
        width: 16vw;
        background: #f6f5f6;
      }
      .pet-shop {
        width: 16vw;
        background: #f6f5f6;
      }
    }

    .location {
      display: flex;
      justify-content: space-between;
      border-top: 0.267vw solid #f4f4f4;
      .left {
        font-size: 3.467vw;
        .one {
          color: #0d0d0d;
          margin: 3.467vw 0 1.133vw 0;
        }
        .two {
          color: #6b6b6b;
        }
      }
      .right {
        .phone {
          color: #888a89;
          font-size: 2.667vw;
        }
        img {
          width: 4.8vw;
          margin-top: 3.467vw;
        }
      }
    }
  }
}
body {
  background: #ffffff;
}

.divide {
  // background: #e6e6e8;
  width: 100vw;
  height: 18.667vw;
  margin-top: 5.333vw;
}
.main1 {
  display: flex;
  justify-content: space-between;
  margin-top: 7.333vw;
  .mainbx {
    width: 93.067vw;
    margin: auto;
    .gou {
      background-color: #f63;
      color: white;
    }
    .xianhua {
      font-size: 4.8vw;
    }
  }
  p {
    width: 22vw;
    font-size: 3.733vw;
  }
}
.luyou {
  margin-top: 5.333vw;
  // height: 80vw;
  display: flex;
  justify-content: space-between;
  .border {
    width: 24vw;
    border: 0.267vw solid #e6e6e8;
    background-color: #eee;
    border-radius: 8vw;
    text-align: center;
  }
}
</style>
<style >
.van-swipe__indicators {
  display: none !important;
}
</style>